.wrapper {
  width: 1440px;
  margin: 0 auto;
}
.top-wrapper {
  width: 1440px;
  height: 40px;
  border-bottom: 1px solid #f0eeee;
  background-color: #f7f9fc;
  position: relative;
}
.top-wrapper .topbar {
  width: 1190px;
  line-height: 40px;
  font-size: 13px;
  color: #858f9f;
  position: absolute;
  left: 107px;
}
.top-wrapper .topbar span {
  margin: 0 10px;
}
.top-wrapper .topbar .left {
  float: left;
}
.top-wrapper .topbar .left .qian {
  float: left;
}
.top-wrapper .topbar .left .hou {
  float: right;
  color: #22276e;
}
.top-wrapper .topbar .right {
  float: right;
  position: relative;
}
.top-wrapper .topbar .right a {
  color: #858f9f;
  margin: 0 10px;
}
.top-wrapper .topbar .right i {
  color: red;
  position: absolute;
  left: 221px;
  top: 6px;
}
.nav-wrapper {
  width: 1440px;
  height: 86px;
  border-bottom: 1px solid #bebebe;
}
.nav-wrapper .navbar {
  width: 1190px;
  line-height: 86px;
  position: relative;
}
.nav-wrapper .navbar .nav {
  position: absolute;
  top: 13px;
}
.nav-wrapper .navbar .text {
  font-size: 16px;
  color: #656e79;
  position: absolute;
  left: 190px;
  font-size: 18px;
}
.nav-wrapper .navbar .text .yangshi {
  color: #2158e6;
}
.nav-wrapper .navbar .text a {
  margin: auto 12px;
}
.nav-wrapper .navbar .text .hot1 {
  position: absolute;
  top: -14px;
  left: 114px;
}
.nav-wrapper .navbar .text .hot2 {
  position: absolute;
  top: -14px;
  left: 198px;
}
.nav-wrapper .navbar .text a:hover {
  color: #2158e6;
}
.nav-wrapper .navbar .search-wrapper {
  position: relative;
  left: 685px;
  float: left;
}
.nav-wrapper .navbar .search-wrapper .search-inp {
  position: absolute;
  top: 26px;
  width: 144px;
  height: 28px;
  outline: none;
  line-height: 28px;
  padding: 2px 44px 2px 17px;
  border: 1px solid #b9b6b6;
  border-right: none;
}
.nav-wrapper .navbar .search-wrapper .search:hover .search-inp,
.nav-wrapper .navbar .search-wrapper .search:hover .search-btn {
  border-color: red;
}
.nav-wrapper .navbar .search-wrapper .search-btn {
  position: absolute;
  width: 30px;
  height: 34px;
  top: 26px;
  left: 206px;
  border: 1px solid #b9b6b6;
  border-left: none;
  background-color: white;
}
.nav-wrapper .navbar .search-wrapper .search-btn img {
  position: absolute;
  top: 5px;
  left: 4px;
}
.nav-wrapper .navbar .login {
  float: right;
}
.nav-wrapper .navbar .login button {
  position: absolute;
  width: 90px;
  height: 34px;
  top: 27px;
  font-size: 15px;
  border: none;
  border-radius: 5%;
  border: 1px solid #b9b6b6;
}
.nav-wrapper .navbar .login .denglu {
  left: 968px;
  color: #57585b;
  background-color: #f8f8fa;
}
.nav-wrapper .navbar .login .zhuce {
  left: 1077px;
  color: white;
  background-color: #627fe0;
}
.wenzi {
  position: relative;
  width: 1440px;
  height: 40px;
  line-height: 40px;
  font-size: 17px;
}
.wenzi a {
  position: absolute;
  left: 425px;
  color: #dba070;
}
.header-wrapper {
  width: 1440px;
  height: 387px;
  background-color: blue;
  position: relative;
}
.header-wrapper .java {
  position: absolute;
  left: 106px;
  width: 237px;
  height: 357px;
  background-color: #3d3a3a;
  opacity: 0.95;
  padding: 15px 0;
  font-size: 17px;
}
.header-wrapper .java .item {
  width: 237px;
  height: 40px;
  line-height: 40px;
}
.header-wrapper .java .item a {
  margin: 0 30px;
  color: white;
}
.header-wrapper .java .item a i {
  float: right;
  line-height: 40px;
  font-size: 10px;
  margin-right: 20px;
}
.header-wrapper .java .item:hover {
  background-color: #2ca0c4;
}
.header-wrapper .javaee-list {
  position: absolute;
  display: none;
  left: 340px;
  width: 628px;
  height: 346px;
  background-color: #210375;
  opacity: 0.8;
  z-index: 999;
  border-bottom-right-radius: 8px;
}
.header-wrapper .javaee-list a {
  float: left;
  color: white;
  font-size: 15px;
  display: block;
  width: 100px;
  height: 15px;
  margin: 22px 5px 10px 17px;
}
.header-wrapper .javaee:hover .javaee-list {
  display: block;
}
#outer {
  width: 968px;
  height: 386px;
  position: absolute;
  left: 340px;
  overflow: hidden;
}
#outer #prev,
#outer #next {
  position: absolute;
  top: 50%;
  width: 45px;
  height: 45px;
  line-height: 45px;
  border-radius: 50%;
  font-size: 25px;
  color: white;
  border: none;
  background-color: rgba(190, 189, 189, 0.26);
  z-index: 999;
  transition: background-color 0.2s ease;
  display: none;
}
#outer #prev {
  left: 60px;
}
#outer #next {
  right: 40px;
}
#outer #prev:hover,
#outer #next:hover {
  color: orange;
}
#outer #imglist {
  position: absolute;
}
#outer #imglist li {
  float: left;
}
#outer #imglist li img {
  width: 968px;
  height: 386px;
}
#outer #pointer {
  position: absolute;
  bottom: 14px;
}
#outer #pointer a {
  float: left;
  width: 10px;
  height: 10px;
  background-color: #ddd;
  border-radius: 50%;
  z-index: 3;
  margin-left: 17px;
  opacity: 0.7;
  /* 兼容IE8透明 */
  filter: alpha(opacity=50);
}
#outer #pointer a:hover {
  background-color: white;
  opacity: 1;
}
#outer .zhibo-wrapper {
  position: absolute;
  top: 10px;
  left: 762px;
  z-index: 9;
  width: 206px;
  height: 346px;
  background-color: white;
}
#outer .zhibo-wrapper h1 {
  font-size: 20px;
  color: #0206f5;
  font-weight: bold;
  text-align: center;
  margin-top: 8px;
}
#outer .zhibo-wrapper h2 {
  color: black;
  text-align: center;
}
#outer .zhibo-wrapper .imgku {
  position: absolute;
  top: 68px;
  width: 170px;
  height: 100px;
  left: 20px;
  background-image: url("../img/37.jpg");
  background-size: 100%;
  background-color: hsl(244, 69%, 46%);
  background-blend-mode: overlay;
}
#outer .zhibo-wrapper .imgku h2 {
  position: absolute;
  top: 18px;
  left: 55px;
  color: white;
}
#outer .zhibo-wrapper .imgku #time {
  position: absolute;
  top: 63px;
  left: 30px;
  color: white;
}
#outer .zhibo-wrapper h3 {
  position: absolute;
  top: 177px;
  left: 46px;
  color: black;
}
#outer .zhibo-wrapper img {
  position: absolute;
  top: 208px;
  left: 34px;
}
#outer .zhibo-wrapper h4 {
  position: absolute;
  top: 206px;
  left: 53px;
}
#outer .zhibo-wrapper .baoming {
  position: absolute;
  top: 244px;
  left: 20px;
  width: 170px;
  height: 41px;
  border-radius: 20px;
  color: white;
  border: none;
  background-color: #2158e6;
}
#outer .zhibo-wrapper .kecheng {
  position: absolute;
  top: 294px;
  left: 20px;
  width: 170px;
  height: 41px;
  border-radius: 20px;
  color: white;
  border: none;
  background-color: #c2c0c0;
}
#outer:hover #prev,
#outer:hover #next {
  display: block;
}
.middle-wrapper {
  position: relative;
  width: 1440px;
  height: 62px;
  border: 1px solid #ddd;
}
.middle-wrapper h1 {
  position: absolute;
  left: 113px;
  line-height: 62px;
  font-size: 24px;
  color: black;
  font-weight: bold;
}
.middle-wrapper a {
  position: absolute;
  top: 30px;
  left: 423px;
  float: left;
  color: #969494;
}
.middle-wrapper a .butong {
  color: black;
}
.middle-wrapper a span {
  margin-right: 55px;
}
.middle-wrapper a span:before {
  content: "●";
  color: #838282;
  margin-right: 2px;
}
.middle-wrapper a .teshu {
  float: right;
  color: #2158e6;
}
.img-wrapper {
  position: relative;
  width: 1440px;
  height: 119px;
  border-bottom: 1px solid #ddd;
}
.img-wrapper .img1 {
  position: absolute;
  top: 19px;
  left: 110px;
}
.img-wrapper .img2 {
  position: absolute;
  top: 19px;
  left: 709px;
}
.jiaxin {
  position: relative;
  width: 1440px;
  height: 318px;
  background-color: #eeeded;
}
.jiaxin span {
  position: absolute;
  left: 1240px;
  top: 23px;
  color: #3737e2;
}
.jiaxin h1 {
  font-size: 25px;
  color: black;
  font-weight: bold;
  position: absolute;
  top: 17px;
  left: 130px;
}
.jiaxin h2 {
  position: absolute;
  top: 184px;
  left: 10px;
  font-size: 15px;
  color: black;
}
.jiaxin h3 {
  position: absolute;
  top: 216px;
  left: 10px;
  color: #949393;
}
.jiaxin .sheji,
.jiaxin .api,
.jiaxin .java,
.jiaxin .banner {
  position: absolute;
  top: 67px;
  width: 277px;
  height: 249px;
  background-color: white;
}
.jiaxin .sheji img,
.jiaxin .api img,
.jiaxin .java img,
.jiaxin .banner img {
  width: 100%;
  height: 174px;
}
.jiaxin .sheji {
  left: 118px;
}
.jiaxin .api {
  left: 412px;
}
.jiaxin .java {
  left: 707px;
}
.jiaxin .banner {
  left: 1002px;
}
.jiaxin .banner img {
  width: 100%;
  height: 100%;
}
